<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 16:33:15
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-13 17:00:55
-->
<template>
  <view class="content">
    <view>
      <swiper
        :indicator-dots="false"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        indicator-active-color="#fa4848"
        class="swiper-outer"
      >
        <swiper-item
          v-for="(item, index) in imgSrcArr"
          :key="index"
          class="swiper-box"
        >
          <view class="banner-img">
            <image
              class="swiper-images"
              :src="item.src"
              mode="widthFix"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view  v-if="authorities.length">
      <view class="normal-control">
        <view class="normal-control-title"> 最近使用</view>
        <view class="normal-control-con" v-if="array.length > 0">
          <picker
            @change="bindPickerChange"
            :value="hotelIndex"
            :range="array"
            range-key="name"
            class="normal-control-con-picker"
          >
            <view style="display: inline-block;vertical-align: middle;line-height:24rpx;" class="uni-input">{{
              array[hotelIndex].name
            }}</view>
            <view style="display: inline-block;vertical-align: middle;line-height:8rpx;">
              <image
                class="nav-list-item-arr-show"
                src="https://szgd-dev.tgovcloud.com/public/images/arr-down.png"
                mode="widthFix"
              ></image>
            </view>
          </picker>
        </view>
      </view>
      <view class="nav-list">
        <view
          v-for="(item, index) in authorities"
          :key="item.type"
          class="nav-list-item"
        >
          <view class="nav-list-item-img">
            <image
              class="nav-list-item-img-show"
              :src="item.icon"
              mode="widthFix"
            ></image>
          </view>
          <view class="nav-list-item-title">{{
            item.title == "入住登记" ? "快捷入住" : item.title
          }}</view>
          <view class="nav-list-item-arr" >
            <view
              v-if="item.scanCode"
              @click="scanCodeClick(item)"
              class="nav-list-item-arr-btn"
            >扫一扫</view>
            <!-- 其它操作 -->
            <block v-if="item.btns">
              <view
                v-for="(t,i) in item.btns"
                :key="i"
                class="nav-list-item-arr-btn nav-list-item-arr-btn-second"
                :class='t.color?"nav-list-item-arr-btn-blue":""'
                @click="goPage(t.link, item.type)"
              >{{ t.name }}</view>
            </block>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="no-menu">
        暂无权限！
    </view>
  </view>
</template>

<script>
import { login} from "@/api/login";
import { scanCode, scanOrderCode } from "../../utils";
import { getData } from "@/api"

var phone;
export default {
  data() {
    return {
      authorities:[],
      personTypeIndex: 6,//人员类型默认选择【其他】
      quarantineDay: 14,//隔离天数
      imgSrcArr: [
        {
          src: "https://szgd-dev.tgovcloud.com/public/images/banner.png",
          url: "https://element.eleme.cn/#/zh-CN/component/installation",
        },
      ],
      //隔离管理菜单
      navList: [
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/disinfect/icon-sewage.png",
          title: "污水处理监测",
          type: "sewageDisposal",
          linkTo: "disinfect",
          scanCode: true,
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/disinfect/icon-garbage.png",
          title: "垃圾管理监测",
          type: "WasteManagement",
          linkTo: "disinfect",
          scanCode: true,
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/clean-icon.png",
          title: "保洁登记",
          type: "clean",
          linkTo: "disinfect",
          scanCode: true,
          btns: [],
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/inspection-icon.png",
          title: "巡检登记",
          type: "inspection",
          linkTo: "disinfect",
          scanCode: true,
          btns: [],
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/disinfect-icon.png",
          title: "消杀登记",
          type: "disinfect",
          linkTo: "disinfect",
          scanCode: true,
          btns: [],
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/images/envir-moni.png",
          title: "环境核酸监测",
          type: 'environmentalMonitoring',
          btns:[
            { name: '查看', link: '/packageAlpha/pages/environmentalMonitoring/index', color:true }
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/infectPrevention/icon.png",
          title: "感染防控督导",
          type: "infectPrevention",
          btns: [
            { name: '填写', link: '/packageAlpha/pages/infectPrevention/index',color:true },
            { name: '查看', link: '/packageAlpha/pages/infectPrevention/list' },
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/check-out.png",
          title: "离点登记",
          type: "checkOut",
          scanCode: true,
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/referral/icon-referral.png",
          title: "转诊就医",
          type: "referral",
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/medical.png",
          title: "医学观察",
          type: "medicalObservation",
          scanCode: true,
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/health.png",
          title: "健康评估",
          type: "healthInspect",
          scanCode: true,
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "../../static/index/icon-psychologicalInspection.png",
          title: "心理巡诊",
          type: "psychologicalInspection",
          btns: [
            { name: '选房间', link: '/packageAlpha/pages/psychologicalInspection/index' }
          ]
        },
        {
          icon: "../../static/index/icon-isolationDelay.png",
          title: "隔离延期",
          type: "IsolationDelay",
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "../../static/index/icon-changeOccupancy.png",
          title: "入住变更",
          type: "changeOccupancy",
          btns: [
            { name: '选房间', link: '/pages/publicRooms/index' }
          ]
        },
        {
          icon: "https://szgd-dev.tgovcloud.com/public/images/check-in.png",
          title: "入住登记",
          type: "checkIn",
          btns: [
            { name: '选房间', link: '/pages/rooms/index' }
          ]
        },
      ],
      array: [],
      hotelIndex: 0,
    };
  },
  methods: {
    //修改酒店
    bindPickerChange: function(e) {
      this.hotelIndex = e.target.value;
      const {phone} = uni.getStorageSync("personalInfo");
      let {name, id: hotelId} = this.array[this.hotelIndex]
      uni.setStorage({ key: "hotelName", data: name });
      uni.setStorage({ key: "hotelId", data: hotelId });
      login(phone, hotelId)
    },
    //扫一扫
    scanCodeClick(item) {
      let title = item.title;
      let type = item.type;
      // 消杀登记 巡检登记 保洁登记
      if(item.linkTo == "disinfect"){
        scanOrderCode({
          type,
          fn:(data)=>{
            uni.navigateTo({
              url: `../disinfect/index?type=${type}&title=${title}`,
            });
          }
        })
        return
      }
      scanCode({
        type,
        fn: async (data) => {
          let personState = data.targetUser.personInfo.personState;
          if(personState == 12 || personState == 21 || personState == 22){
            // 未做健康排查的不能做医学观察
            if (type == 'medicalObservation' && !data.targetUser.personInfo.isolateId) {
              uni.showToast({
                title: "该隔离人员尚未做健康排查",
                icon: "none",
                duration: 3000,
              });
              return
            }
            // 待入住不能做离点登记
            if(personState == 12 && type == 'checkOut'){
              uni.showToast({
                title: `人员未入住，无法进行此操作！`,
                icon: 'none',
                duration: 3000
              });
              return
            }
            // 已入住
            uni.navigateTo({
              url: `../${type}/index`,
            });
          }else{
            //未入住
            this.$store.commit('SET_IS_SELECT_ROOM', false)
            if(type=='healthInspect'){
              uni.navigateTo({
                url: `/pages/healthInspect/userBaseInfo?addPerson=true`,
              });
              return
            }
            uni.showToast({
              title: `人员未入住，无法进行此操作！`,
              icon: 'none',
              duration: 3000
            });
          }
        },
      });
    },
    // 跳转链接
    goPage(link, type) {
      uni.navigateTo({
        url: `${link}?type=${type}`,
      });
    },
  },
  onLoad() {
  },
  onReady() {
    let {hotels, authorities}= uni.getStorageSync("personalInfo");
    this.array = hotels
    console.log('index ready', hotels, authorities, uni.getStorageSync("personalInfo"))
    if (this.array && this.array.length) {
      let hotelId = uni.getStorageSync('hotelId');
      let res = this.array.filter((t,i) => {
        if (hotelId && t.id == hotelId) {
          this.hotelIndex = i;
          this.array[0] &&  this.array[0].id != hotelId && this.bindPickerChange({target:{value:i}})
          return true;
        } else {
          return false;
        }
      });
      if (!res.length) {
        uni.setStorage({ key: "hotelName", data: this.array[0].name });
        uni.setStorage({ key: "hotelId", data: this.array[0].id });
      }
    } else {
      uni.removeStorageSync('hotelName');
      uni.removeStorageSync('hotelId');
    }

    //判断是否有该菜单的权限
    let newNavList = [];
    if (authorities && authorities.length) {
      this.navList.forEach((value) => {
        authorities.forEach((item) => {
          if (item.name == value.title) {
            newNavList.push(value);
          }
        });
      });
    }
    console.log('权限菜单：', newNavList);
    this.authorities = newNavList
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  .swiper-outer{
    height:290rpx;
  }
}
.no-menu{
  text-align: center;
  color:#ccc;
  font-size: 30rpx;
  margin-top:20vh;

}
.person {
  &-popup {
    &-tip {
      color: #000000;
      text-align: left;
    }
    &-title {
      padding: 30rpx 0 20rpx;
      color: #333;
    }
  }
}
.modal {
  width: 90%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  height: 30vh;
  margin: 30vh auto;
  &-title {
    text-align: center;
    padding: 40rpx;
  }
  .submit-btn {
    border: 1px solid #2c9af1;
    background-color: #fff;
    color: #2c9af1;
  }
}
.swiper-images {
  width: 100%;
  border-radius: 10rpx;
}
.normal-control {
  display: flex;
  padding-top: 40rpx;
  padding-bottom: 0;
  box-sizing: border-box;
  align-items: center;
  &-title {
    font-weight: 600;
    font-size: 40rpx;
    width: 35%;
    float: left;
  }
  &-con {
    width: 65%;
    float: right;
    &-picker {
      padding: 10rpx 20rpx;
      text-align: center;
      border: 1px solid #2c9af1;
      border-radius: 8rpx;
      .uni-input {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size:24rpx;
      }
    }
  }
}
.nav-list {
  padding-top: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  &-item {
    // background: url(https://szgd-dev.tgovcloud.com/public/images/bg.png);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    width: 100%;
    background: #fff;
    border-top:1rpx solid rgba($color:#2c9af1, $alpha:.2);
    box-shadow:0px 1px 10px rgba($color: #E5E5E5, $alpha: .8);
    // height: 300rpx;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    padding: 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    &-title {
      flex: 2;
      font-size:36rpx;
    }
    &-img {
      margin-right: 20rpx;
      &-show {
        width: 110rpx;
        height: 110rpx;
      }
    }
    &-arr {
      flex: 1;
      margin-right: 20rpx;
      text-align: right;
      &-btn {
        width: 120rpx;
        color: #fff;
        border: 1px solid #2c9af1;
        background-color: #2c9af1;
        border-radius: 16rpx;
        padding: 10rpx 40rpx;
        font-size: 34rpx;
        text-align: center;
        margin-bottom: 20rpx;
        &:last-child {
          margin-bottom: 0;
        }
        &-second{
          background-color: #fff;
          color: #2c9af1;
        }
      }
      &-btn-blue{
        border: 1px solid #2c9af1;
        background-color: #2c9af1;
        color:#fff;
      }
      &-show {
        width: 24rpx;
        height: 20rpx;
      }
    }
    &-success{
      width: 20rpx;
      height: 20rpx;
      background-image: url();
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
.self-report {
  margin-top: 40rpx;
  &-list-item {
    // height: 200rpx;
  }
  &-icon {
    width: 36rpx;
    height: 36rpx;
    background-size: 100%;
    display: inline-block;
    margin-right: 20rpx;
    margin-left: 20rpx;
    vertical-align: middle;
    background-image: url("");
    &-success {
      background-image: url("");
    }
  }
}
.start-btn {
  background-color: #2c9af1;
  border-radius: 16rpx;
  width: 50vw;
  padding: 20rpx;
  color: #fff;
  text-align: center;
  margin: 40rpx auto;
}
.child-report {
  text-align: center;
  margin-top: 10vh;
  &-img {
    width: 200rpx;
  }
  &-text {
    font-size: 30rpx;
    color: #cccccc;
    margin-top: 5vh;
  }
}
</style>
